<template>
	<view class="">

		<u-navbar title="浏览历史" :autoBack="true" :placeholder="true"></u-navbar>

		<view class="his-list">

			<view class="his-item" v-for="item of historyData" :key="index" @click="navigateTo"
				data-url="/subPages/goodDetails/goodDetails" :data-id="item.id">
				<view class="">
					<image :src="item.mian_photo" class="item-img" mode=""></image>
				</view>
				<view class="item-right">
					<view class="item-name">{{item.name}}</view>
					<view class="item-right2">
						<view class="item-price">￥{{item.price}}</view>
						<view class="item-pay_num">已售{{item.pay_num}}</view>
					</view>

				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyData: null, //浏览记录
			}
		},
		onShow() {
			this.getstrufflist();
		},
		methods: {
			// 获取签到列表
			async getstrufflist() {
				let res = await this.$api.getstrufflist();
				console.log(res);
				this.historyData = res.data.data;
			},
			// 跳转函数
			navigateTo(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url + "?id=" + e.currentTarget.dataset.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.his-list {
		margin-top: 20rpx;
		overflow-y: scroll;
		height: 100%;
	}

	.his-item {
		// width: 100%;
		background-color: white;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 40rpx 20rpx;
	}

	.item-img {
		width: 100rpx;
		height: 100rpx;
	}


	.item-right {
		width: calc(100% - 100rpx);
		padding-left: 20rpx;
	}

	.item-right2 {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		line-height: 50rpx;
		height: 50rpx;
	}

	.item-pay_num {
		font-size: 22rpx;
		color: #999;
	}

	.item-price {
		color: #ff1f1f;
	}

	.item-name {
		font-size: 28rpx;
	}
</style>